<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hystrix Dashboard</title>

	<!-- Our custom CSS -->
	<link rel="stylesheet" type="text/css" href="./index.css" />

	<!-- Javascript to monitor and display -->
	<script src="./js/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

	<script>
		var streams = [];
		function addStream() {
			if($('#stream').val().length > 0) {
				var s = {
					name: $('#title').val(),
					stream: $('#stream').val(),
					auth: $('#authorization').val(),
					delay: $('#delay').val()
				};

				streams.push(s);
				$('#streams').html('<table>' + _.reduce(streams, function(html, s) {
					return html + '<tr><td>' + s.name + '</td><td>' + s.stream + '</td></tr>';
				}, '') + '</table>');

				$('#message').html("");
			} else {
				$('#message').html("The 'stream' value is required.");
			}
		}
		function monitorStreams() {
			if (streams.length) {
				location.href= './monitor/monitor.html?streams=' + encodeURIComponent(JSON.stringify(streams));
			} else {
				$('#message').html("Add Streams to monitor, before starting to monitor.");
			}
		}
		$(document).ready(function() {
			$('#stream').keypress(function(e) {
				if(e.which == 13) {
					monitorStreams();
				}
			});
		});
	</script>
</head>
<body>
<div style="width:800px;margin:0 auto;">
	
	<center>
	<img width="264" height="233" src="./images/hystrix-logo.png">
	<br>
	<br>
	
	<h2>Hystrix Dashboard</h2>
	<input id="stream" type="textfield" size="120" placeholder="http://hostname:port/turbine/turbine.stream"></input>
	<br><br>
	<i>Cluster via Turbine (default cluster):</i> http://turbine-hostname:port/turbine.stream
	<br>
	<i>Cluster via Turbine (custom cluster):</i> http://turbine-hostname:port/turbine.stream?cluster=[clusterName]
	<br>
	<i>Single Hystrix App:</i> http://hystrix-app:port/hystrix.stream
	<br><br>
	Delay: <input id="delay" type="textfield" size="10" placeholder="2000"></input>ms 
	&nbsp;&nbsp;&nbsp;&nbsp; 
	Title: <input id="title" type="textfield" size="60" placeholder="Example Hystrix App"></input><br><br>
    Authorization: <input id="authorization" type="textfield" size="60" placeholder="Basic Zm9vOmJhcg=="></input><br>
	<br>
	<button onclick="addStream()">Add Stream</button>
	<br><br>
	<ol id='streams'></ol>
	<br><br>
	<button onclick="monitorStreams()">Monitor Streams</button>
	<br><br>
	<div id="message" style="color:red"></div>
	
	</center>
</div>
</body>
</html>
